<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('consumo.interOrgTransferIn')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{$t('distributedEnter.distributed')}}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.oddNum"
								:placeholder="$t('distributedEnter.placeholderText')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{$t('distributedEnter.materialCode')}}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.materialCode"
								:placeholder="$t('materials.pleaseMaterialcode')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{$t('distributedEnter.date')}}</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="data.chooseTime.length">
								<text>{{data.chooseTime[0]}}</text>  <text v-if="data.chooseTime[1]"> - {{data.chooseTime[1]}}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{$t('smashRemoval.completionStatus')}}</text>
						<view class="gui-form-body gui-text-right" style="overflow: visible;">
							<superweiCombox style="text-align: right;" :candidates="data.selectList" :placeholder="$t('distributedOut.placeholder')"
							:isJSON="true" keyName="name" @select="select" v-model="data.selectText" :defaultValue="$t('smashRemoval.all')"></superweiCombox>
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{$t('locationBarcodeInfo.contractNo')}}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.contractNo"
								:placeholder="$t('distributedEnter.placeholderText')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text class="gui-block gui-color-black gui-button-text-mini gui-icons"
									>{{$t('distributedEnter.reset')}}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text
									class="gui-block gui-color-white gui-button-text-mini gui-icons">{{$t('distributedEnter.search')}}</text>
							</button>
						</view>
					</view>
				</view>
				<!-- 筛选按钮 ,做完成和未完成的筛选-->
				
				<!-- 底部显示区域 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom" v-for="(x,i) in data.list" @click="goPage(x)" :key="i">
						<view class="card-head">
							<text>{{$t('distributedEnter.distributed')}}：{{x.receiptCode}}</text>
								<gui-tags v-if="x.stepOutStatus == 'noComplete'" :text="$t('distributedEnter.statusNo')"
									:customClass="['gui-transparent-bg', 'gui-color-blue']" :width="80"
									:lineHeight="2.5" :size="12" borderColor="#008AFF"></gui-tags>
								<gui-tags v-else :text="$t('distributedEnter.statusOk')"
									:customClass="['gui-transparent-bg', 'gui-color-green']" :width="80"
									:lineHeight="2.5" :size="12" borderColor="#39B55A"></gui-tags>
						</view>
						<view class="card-body" style="padding-bottom: 15rpx;">
						    <!-- 展开按钮 -->
							<view class="card-rotating card-rotating-top" @click.stop="openClick(i)">
								<!-- <uni-icons type="bottom" color="#9C9C9C" size="20"></uni-icons> -->
								<uni-icons v-if="!data.listShow[i]" type="bottom" color="#9C9C9C" size="20"></uni-icons>
								<uni-icons v-if="data.listShow[i]" type="top" color="#9C9C9C" size="20"></uni-icons>
							</view>
							<!-- card的内容 -->
							<view class="card-body-item">
								<text class="body-item-title">{{$t('distributedEnter.date')}}：</text>{{x.receiptDate}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('distributedEnter.compiler')}}：</text> {{x.createUserName}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('distributedEnter.totalQty')}}：</text> {{x.outSumQty}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('locationBarcodeInfo.contractNo')}}：</text> {{x.attribute1}}
							</view>
						</view>
						<!-- 多个物料的时候有展开,一个的时候没有下面的模块,包括展开按钮都不需要 -->
						<view class="card-body-folding" v-show="data.listShow[i]" v-if="x.materials?.length > 0">
							<view class="gui-border-t gui-padding" v-for="(item,i) in x.materials" :key="i">
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{$t('distributedEnter.materialName')}}：</text> {{item.materialName}}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{$t('distributedEnter.materialCode')}}：</text> {{item.materialCode}}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{$t('distributedEnter.uom')}}：</text> {{item.unit}}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{$t('distributedEnter.qty')}}：</text> {{item.qty}}
									</view> 
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{$t('materials.quantityInStorage')}}：</text> {{item.scanQty || 0}}
									</view>
								</view>

							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
					    {{data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="data.chooseTime"></calendarCustom>
		</template>
	</gui-page>
</template>
<script setup>
	import searchCustom from '@/components/searchCustom';
	import calendarCustom from '@/components/calendarCustom';
	import superweiCombox from '@/components/superweiCombox';
	import { onShow } from '@dcloudio/uni-app';
	import openView from '@/components/common/openView';
	import { useI18n } from 'vue-i18n';
	import { basPdaOperationLogFn } from '@/utils/index.js';
    import { OPERATION_SEARCH, OPERATION_REASCT, OPERATION_LOOK, OPERATION_CHOOSE } from '@/constant/index.js'
	import {
		ref, 
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		selectStepoutH
	} from '@/api/api.js'
	import graceJS from "@/Grace6/js/grace.js";
	import { navigate } from '@/utils/routerSkip.js';
	import { useStore } from "vuex";
	let store = useStore();
	const { t } = useI18n();

	components: {
		searchCustom,
		superweiCombox,
		calendarCustom,
		openView
	}
	let calendarCustomRef = ref(null);
	let data = reactive({
		list: [],
		chooseTime: [],
		oddNum: '',
		contractNo:'',
		materialCode:'',
		selectList: [ {
			id: '',
			name: t('smashRemoval.all')
		},{
			id: 'noComplete',
			name: t('distributedEnter.statusNo')
		}, {
			id: 'complete',
			name: t('distributedEnter.statusOk')
		}],
		selectId:'',
		selectText:t('smashRemoval.all'),
		listShow:[],
		page:1,
		rows:10,
		operationType:'',
		isFinish:false,
		isLoading:false,
		noticeHooks: false, //暂无相关数据标识
	});
	const {
		ctx
	} = getCurrentInstance();
	onMounted(() => {
		getSystemTimeRequest()
	})
	onShow(() => {
		// 请求列表接口
		data.operationType = OPERATION_LOOK
		data.page = 1
		selectStepoutHFn()
		// 清除调入数组
		store.commit('clearTransferredList')
	})
	const getSystemTimeRequest = () => {
		store.dispatch('getSystemTimeRequest')
	        .then(res => {
	          console.log(res, '----param-----')
			  if(res.length){
				data.chooseTime.push(res)
			  }
	        })
	}
	const selectStepoutHFn = () => {
		let parmes = {
			stepOutDateStart:data.chooseTime[0] || '',
			stepOutDateEnd:data.chooseTime[1] ? data.chooseTime[1] : (data.chooseTime[0] || ''),
			stepOutStatus:data.selectId,
			docNo:data.oddNum,
			materialCode:data.materialCode,
			contractNo:data.contractNo,
			page:data.page,
			rows:data.rows
		}
		selectStepoutH(parmes).then(res=>{
			try { 
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '组织间调入'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:data.operationType
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			data.isLoading = false;
			if (res.status == 200) {
				data.noticeHooks = false
				// data.list = res.data.rows;
				// data.total = res.data.total;
				const { rows } = res.data;
				if(rows.length){
					rows.forEach(x=>{
						rows.listShow = false
					})
				}
				
				if(data.page == 1){
					if (rows.length == 0) {
						data.noticeHooks = true
					}
					data.list = rows
				}else{
					
					data.list.push(...rows)
				}
				data.noticeHooks = data.list.length >= res.data.total;
				data.isFinish = data.list.length >= res.data.total;	
			}else{
				uni.showToast({title: res.message,icon: 'none'})
			}
		})
	}
	
	
	
	const openClick = (index) =>{
		data.listShow[index] = !data.listShow[index]
	}
	// 下拉加载
	const scrolltolowerFn = () => {
		console.log(data.isFinish,'data.isFinishdata.isFinish')
		if(!data.isFinish && !data.isLoading){
			data.page ++
			data.isLoading = true;
			selectStepoutHFn()
		}
	}
	// 校验状态的选择事件
	const select = (e) => {
		data.selectId = e.id;
	}
	const goPage = (x) => {
		console.log()
		if(x.stepOutStatus == "complete") return uni.showToast({title: t('pageTranslation.theDocumentHas'),icon: 'none'})
		try {
			let inputParameter = x.docNo
			let returnParameter = '无'
			let operationPicture = '组织间调入'
			let callInterface = '无'
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:'无',//返回状态
				errorMessage:'无',//错误信息
				isPass:'Y',//是否成功 Y N
				operationType:OPERATION_CHOOSE
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
			
		}
		navigate({
			url:`/pages/distributed/distributedEnterDetail?id=${x.id}`
		})
	}
	const search = () => {
		data.page = 1
		data.operationType = OPERATION_SEARCH
		selectStepoutHFn()
	}
	const reset = () => {
		data.operationType = OPERATION_REASCT
		data.chooseTime = []
		data.oddNum = '';
		data.selectId = '';
		data.materialCode='';
		data.contractNo=''
		data.selectText = t('smashRemoval.all');//t('smashRemoval.all')国际化全部
		selectStepoutHFn()
		
	}
	const dateChoose = () => {
		calendarCustomRef.value.open();
	}
	const getTime = (times) => {
		data.chooseTime = times;
	}
</script>
<style lang="scss" scoped>
	.distributed-head{
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
	.scroll {
		flex: 1;
		height: 2rpx;
	}

	.distributed {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 88rpx);
		// height: 100vh;
	}

	.card-box {
		margin: 0 15rpx;
		box-shadow: 0rpx 0rpx 4rpx 0 #A5A5A5;
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.card-item {
		line-height: 60rpx;
	}

	.card-bottom {
		margin-bottom: 30rpx;
	}

	.filtrate-item {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		margin-bottom: 20rpx;

		.filtrate-itemLeft {
			height: 32rpx;
			line-height: 32rpx;
			width: 100rpx;
		}

		.filtrate-itemRight {
			border: 2rpx solid #A5A5A5;
			border-radius: 8rpx;
			overflow: hidden;
			line-height: 40rpx;
			width: 300rpx;
		}
	}
	// 展开按钮样式
	.card-rotating-top{
		margin-top: 10rpx;
	}

	.card-selectCustom{
		margin:  0.46875rem 0.625rem;
    	box-shadow: 0 0 0.125rem 0 #a5a5a5;
    	background: #fff;
 		padding: 0.375rem 0.75rem;
    	border-radius: 0.5rem;
		position: relative;
		height: 70rpx;
	}
</style>
